<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css无限滚动</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    @keyframes move {
      from {
        transform: translate(0);
      }
      to {
        transform: translate(-1260px);  /* 一组数据的宽度 */
      }
    }
    .container{
      width: 800px;
      height: 100px;
      overflow: hidden;
      margin-top: 100px;
    }
    .content{
      width: 2520px; /* 为两组的宽度 */
      height: 100%;
      animation: move 12s linear infinite forwards;
    }
    .content:after{
      content: '';
      display: block;
      clear: both;
    }
    .list{
      width: 150px;
      height: 100px;
      margin-right: 30px;
      float: left;
      overflow: hidden;
    }
    .content:hover{
      animation-play-state:paused;
			-webkit-animation-play-state:paused;
    }
    img{
      width: 100%;
    }


    /* 垂直滚动 */
    .vertical{
      width: 100%;
      height: 100px;
      overflow: hidden;
    }
    .vertical-cont{
      height: 208px; /* 两组数据的高度度 */
      animation: up 6s linear infinite forwards;
    }
    .vertical-cont:hover{
      animation-play-state:paused;
			-webkit-animation-play-state:paused;
    }
    @keyframes up {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-104px);  /* 一组数据的高度度 */
      }
    }

    /* 不确定宽度的情况下无限滚动 */
    .container-3{
      margin-top: 100px;
      width: 800px;
      height: 100px;
      overflow: hidden;
    }
    .content-3{

    }
    .content-3:after{
      content: '';
      display: block;
      clear: both;
    }
    .first{
      float: left;
    }
    .list-3{
      width: 150px;
      height: 100px;
      margin-right: 30px;
      float: left;
      overflow: hidden;
    }

  </style>
</head>
<body>
  <!-- css水平滑动 -->
  <div class="container">
    <ul class="content">
      <li class="list">
        <img src="../image/ai-product1.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product2.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product3.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product4.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product5.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product6.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product7.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product1.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product2.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product3.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product4.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product5.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product6.png"/>
      </li>
      <li class="list">
        <img src="../image/ai-product7.png"/>
      </li>
    </ul>
  </div>


  <!-- css垂直滑动 -->
  <div class="vertical">
    <div class="vertical-cont">
      <p>今天是个好日子1</p>
      <p>今天是个好日子2</p>
      <p>今天是个好日子3</p>
      <p>今天是个好日子4</p>
      <p>今天是个好日子5</p>
      <p>今天是个好日子1</p>
      <p>今天是个好日子2</p>
      <p>今天是个好日子3</p>
      <p>今天是个好日子4</p>
      <p>今天是个好日子5</p>
    </div>
  </div>


  <!-- 不确定宽度的情况下 -->
  <div class="container-3">
    <div class="content-3">
      <div class="first">
        <div class="list-3">
          <img src="../image/ai-product1.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product2.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product3.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product4.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product5.png"/>
        </div>
      </div>
      <div class="first">
        <div class="list-3">
          <img src="../image/ai-product1.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product2.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product3.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product4.png"/>
        </div>
        <div class="list-3">
          <img src="../image/ai-product5.png"/>
        </div>
      </div>
    </div>
  </div>


  <script>
    var box3 = document.getElementsByClassName('container-3')[0]
    console.log('width:',box3.clientWidth);
    var content3 = document.getElementsByClassName('content-3')[0]
    console.log('content3:',content3.clientWidth);
    function scrollLeft(){

    }
  </script>
</body>
</html>